.codepen-wrapper[data-codepen-id="BLzEo"] * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.codepen-wrapper[data-codepen-id="BLzEo"] *:before, .codepen-wrapper[data-codepen-id="BLzEo"] *:after {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

.codepen-wrapper[data-codepen-id="BLzEo"] body {
background: #fac5cb;
text-align: center;
padding: 50px 0;
}

.codepen-wrapper[data-codepen-id="BLzEo"] #painting {
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
-moz-transform-origin: 50% -40px 0 0 50%;
-ms-transform-origin: 50% -40px 0 0 50%;
-webkit-transform-origin: 50% -40px 0 0 50%;
transform-origin: 50% -40px 0 0 50%;
position: relative;
display: inline-block;
background: #211309;
width: 300px;
height: 234px;
border: solid 3px #211309;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting:before, .codepen-wrapper[data-codepen-id="BLzEo"] #painting:after {
content: " ";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-style: solid;
border-color: transparent;
border-width: 25px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting:before {
top: 2px;
bottom: 2px;
border-color: transparent #bb6c39;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting:after {
left: 2px;
right: 2px;
border-color: #bb6c39 transparent;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .nail {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
position: absolute;
background: #211309;
top: -40px;
left: 0;
right: 0;
height: 6px;
width: 6px;
margin: auto;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .nail:before, .codepen-wrapper[data-codepen-id="BLzEo"] #painting .nail:after {
-moz-transform-origin: 0 0 0;
-webkit-transform-origin: 0 0 0;
transform-origin: 0 0 0;
content: " ";
position: absolute;
background: #211309;
height: 50px;
width: 2px;
left: 2px;
top: 2px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .nail:before {
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .nail:after {
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
transform: rotate(35deg);
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .plaque {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: absolute;
background: #ffbf22;
font-size: 11px;
left: 0;
right: 0;
bottom: 5px;
width: 125px;
margin: auto;
border: solid 2px #211309;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .plaque:before, .codepen-wrapper[data-codepen-id="BLzEo"] #painting .plaque:after {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
background: #211309;
top: 0;
bottom: 0;
width: 2px;
height: 2px;
margin: auto;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .plaque:before {
left: 2px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .plaque:after {
right: 2px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .background {
position: absolute;
top: 28px;
left: 28px;
right: 28px;
bottom: 28px;
background: #211309;
border-top: solid 144px #a3cacd;
border-bottom: solid 25px #8ca1bd;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat {
-moz-border-radius-bottomleft: 12px 22px;
-webkit-border-bottom-left-radius: 12px 22px;
border-bottom-left-radius: 12px 22px;
-moz-border-radius-bottomright: 12px 22px;
-webkit-border-bottom-right-radius: 12px 22px;
border-bottom-right-radius: 12px 22px;
position: absolute;
background: #c95539;
width: 136px;
height: 21px;
top: 153px;
left: 0;
right: 0;
border: solid 2px #211309;
margin: auto;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat:before {
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0;
border-radius: 0 0 7px 7px;
content: " ";
position: absolute;
background: #c95539;
width: 152px;
height: 6px;
top: -10px;
left: -12px;
border: solid 2px #211309;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat:after {
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
content: " ";
position: absolute;
background: #c95539;
width: 4px;
height: 100px;
top: -112px;
left: 50%;
margin-left: -4px;
border: solid 2px #211309;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-left {
-moz-transform: rotate(22deg);
-ms-transform: rotate(22deg);
-webkit-transform: rotate(22deg);
transform: rotate(22deg);
top: -100px;
left: 14px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-left, .codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-left:before {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
content: " ";
position: absolute;
border-style: solid;
border-color: transparent transparent #211309 transparent;
border-width: 0 22px 77px 31px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-left:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
content: " ";
top: 4px;
left: -28px;
border-bottom-color: #ffffff;
border-width: 0 19px 71px 28px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-right {
-moz-transform: rotate(-23deg);
-ms-transform: rotate(-23deg);
-webkit-transform: rotate(-23deg);
transform: rotate(-23deg);
top: -106px;
left: 64px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-right, .codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-right:before {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
content: " ";
position: absolute;
border-style: solid;
border-color: transparent transparent #211309 transparent;
border-width: 0 26px 85px 24px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .boat .sail-right:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
content: " ";
top: 5px;
left: -22px;
border-bottom-color: #ffffff;
border-width: 0 24px 78px 22px;
}
.codepen-wrapper[data-codepen-id="BLzEo"] #painting .clouds {
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309;
-webkit-box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309;
box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309;
position: absolute;
background: #ffffff;
width: 30px;
height: 30px;
top: 50px;
left: 45px;
}